<template>
	<view class="mainbgc" style="display: block;">
		<u-navbar :placeholder="true">
			<view class="ss flexleft" slot="left">
				<image src="../../static/images/hotel/search.png" mode="" style="width: 30rpx; height: 30rpx;"
					class="search"></image>
				<input type="text" placeholder="产品" v-model="keyword" confirm-type="search" @confirm="doSearch">
			</view>
		</u-navbar>
		<view class="ht flexbetween" @click="goselecthotel">
			<view class="flexcenter">
				<image class="dianlogo" src="../../static/images/my/daifahuo.png"></image>
				<view class="dianming">{{hotelinfo.name}}</view>
			</view>
			<view>
				<view class="right_icon"></view>
			</view>
		</view>
		<view class="flexcenter1" v-if="!catelist.length">
			<view class="placeholderimg" style="margin-top: 300rpx;">
				<image src="../../static/images/bg-icons/placeholderimg.png" mode=""></image>
			</view>
			<view class="zanwushuju">暂无数据~</view>
		</view>
		<view class="flexleft plist" v-if="catelist.length">
			<scroll-view scroll-y="true" class="scroll-Yleft">
				<view :class="activeIndex==index? 'itemli-boxf':'itemli-box'" v-for="(item,index) in catelist"
					:key="item.id" @click="changeitem(item,index)">
					<view class="itemli-content1">{{item.name}}</view>
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="scroll-Yright ffffff ">
				<view class="flexcenter1" v-if="!goodslist.data.length">
					<view class="placeholderimg" style="margin-top: 300rpx;">
						<image src="../../static/images/bg-icons/placeholderimg.png" mode=""></image>
					</view>
					<view class="zanwushuju">暂无数据~</view>
				</view>
				<view class="item" v-for="item in goodslist.data" :key="item.id"
					@click="jumpdetail(item.id,item.goodsprice.stock)">
					<view class="itemlist">
						<view class="cartlimg">
							<image :src="item.image_text"></image>
							<view class="noStock" v-show="item.goodsprice.stock==0">售空</view>
						</view>
						<view class="right">
							<view class="righttop">
								<view class="txt1 xiankuan">{{item.title}}</view>
							</view>
							<view class="rightbottom">
								<view class="txt3" style="font-size: 28rpx;">¥{{item.price}}</view>
								<!-- 有规格未选中状态 -->
								<view class="xuanguige" @click.stop="selectguige(item.id)" v-show="item.status==1">选规格
								</view>
								<!-- 有规格无规格选中状态 -->
								<view class="cartnumbox" v-show="item.status==2||item.status==4">
									<image class="jian" @click.stop="jian(item)"
										src="../../static/images/hotel/jian.png"></image>
									<view class="num">{{item.number}}</view>
									<image class="jia" @click.stop="jia(item)" src="../../static/images/hotel/jia.png">
									</image>
								</view>
								<!-- 无规格选中状态 -->
								<view class="cartnumbox" v-show="item.status==3">
									<image class="jia" @click.stop="selectguige(item.id)"
										src="../../static/images/hotel/jia.png"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="bottomsubmitbtn flexbetween" v-if="catelist.length">
			<view class="flexcenter">
				<view class="cartimg">
					<image class="cart" @click="opencart" src="../../static/images/shopping/gouwucghe.png"></image>
					<view class="num">{{allNum}}</view>
				</view>
				<view class="price1">￥{{allprice}}</view>
			</view>
			<view class="submitcontext" @click="gojiesuan">去结算</view>
		</view>
		<!--选规格弹窗-->
		<u-popup :show="show" mode="bottom" @close="show = false">
			<view class="guitan">
				<view class="tantop flexleft" style="margin: -30rpx;">
					<view class="item">
						<view class="flexcenter">
							<view class="flimg">
								<image :src="dataAll.image_text" mode=""></image>
							</view>
							<view class="pmiddle">
								<view class="flexleft tanprice">
									<view class="newtanprice">￥{{dataAll.goodsprice.price}}</view>
								</view>
								<view class="kucun">库存:{{dataAll.goodsprice.stock}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="guige" v-for="item in dataAll.spu" :key="item.id">
					<view class="tangui">{{item.name}}</view>
					<view class="guilist flexleft">
						<view :class="item.selecttext==ite?'guiitem active':'guiitem noactive'"
							v-for="(ite) in item.item" :key="ite" @click="checkgg(item,ite)">{{ite}}</view>
					</view>
				</view>
				<view class="tannum tangui flexbetween">
					<view>购买数量</view>
					<view class="cartnumbox">
						<image class="jian" @click="jian(dataAll)" src="../../static/images/hotel/jian.png"></image>
						<view class="num">{{dataAll.number}}</view>
						<image class="jia" @click="jia(dataAll,0)" src="../../static/images/hotel/jia.png"></image>
					</view>
				</view>
				<view class="tanbtn" @click="closeguige(dataAll)">确定</view>
			</view>
		</u-popup>
		<!--购物车弹窗-->
		<u-popup :show="cartshow" mode="bottom" @close="cartclose">
			<view class="guitan" style="padding-bottom: 50rpx;">
				<view class="carttantop flexbetween">
					<view class="yixuan">已选商品</view>
					<view class="qing flexleft" @click="clearcart">
						<u-icon name="trash" color="rgba(153, 153, 153, 1)" size="14"></u-icon>
						<view class="clear">清空</view>
					</view>
				</view>
				<view class="carttanlist">
					<view class="flexcenter1" v-if="!carlist.length">
						<view class="placeholderimg" style="margin-top: 300rpx;">
							<image src="../../static/images/bg-icons/placeholderimg.png" mode=""></image>
						</view>
						<view class="zanwushuju">暂无数据~</view>
					</view>
					<view class="cartitem" style=" padding:0; margin-top: 20rpx;" v-for="item in carlist"
						:key="item.sku_id" @click="getiteminfo(item)">
						<view class="itemlist">
							<view class="cartlimg">
								<image :src="item.image"></image>
							</view>
							<view class="right">
								<view class="righttop" style="padding-right: 20rpx;">
									<view class="txt1 xiankuan">{{item.title}}</view>
								</view>
								<view v-if="item.sku.difference.length>0?true:false" class="rightmiddle flexleft">
									<view class="godsguige flexleft">
										<view>颜色:</view>
										<view>{{item.sku.difference[0]}}</view>
									</view>
									<view class="godsguige1 flexleft">
										<view>尺寸:</view>
										<view>{{item.sku.difference[1]}}</view>
									</view>
								</view>
								<view class="rightbottom">
									<view class="txt3" style="font-size: 28rpx;">¥{{item.sku.price}}</view>
									<view class="cartnumbox">
										<image class="jian" @click="carjian(item)"
											src="../../static/images/hotel/jian.png">
										</image>
										<view class="num">{{item.number}}</view>
										<image class="jia" @click="jia(item,1)" src="../../static/images/hotel/jia.png">
										</image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				keyword: '',
				num: 1,
				show: false,
				value: 1,
				activeIndex: 0,
				cartshow: false,
				goodslist: {
					data: []
				},
				limit: 12,
				page: 1,
				hotelinfo: {}, //默认酒店信息
				catelist: [], //商品分类
				lat: "",
				lng: "",
				carlist: [],
				dataAll: {},
				guigeflag: false,
				listid: "",
				allprice: "0.00",
				allNum: 0,
				// price:"",//价格
				// market_price:"",//划线
				addShow: true,
				addCartShow: true,
				newNumber:0,
			};
		},
		onLoad() {

		},
		onShow() {
			uni.$off("gethotelid")
			uni.$on("gethotelid", data => {
				this.listid = data
			})

			if (!httpRequest.checkIsLogin()) {
				this.allprice = "0.00"
				this.allNum = 0
			}
			this.activeIndex = 0
			this.getlocation()
			this.addShow = true
			this.addCartShow = true
		},
		watch: {
			carlist: {
				deep: true,
				handler(newval) {
					let allprice = 0
					let allNum = 0
					newval.forEach(item => {
						allprice = Number(allprice) + item.sku.price * item.number
						allNum += Number(item.number)
					})
					this.allprice = Number(allprice).toFixed(2)
					this.allNum = Number(allNum)
				}
			},
			'dataAll.spu': {
				handler(newval) {
					let arr = []
					newval.forEach(item => {
						arr.push(item.selecttext)
					})
					// 规格换算价格
					let text = arr.join()
					this.dataAll.sku.forEach(item => {
						// 如果后台返回规格与前端规格一致，赋值换算
						if (item.difference == text) {
							this.dataAll.goodsprice.price = item.price //价格赋值
							this.dataAll.goodsprice.market_price = item.market_price //划线价格赋值
							this.dataAll.goodsprice.stock = item.stock //库存
							this.dataAll.sku_id = item.id
						}
					})
					// 计算是否选择规格
					let num = 0
					arr.forEach(item => {
						if (item != "") {
							num = num + 1
						}
					})
					if (num != arr.length) {
						this.guigeflag = false
					} else {
						this.guigeflag = true
					}
				},
				deep: true
			}
		},
		methods: {
			//搜索
			doSearch() {
				let _this = this
				_this.getlocation()
			},
			getiteminfo(item) {
				// console.log(item)
			},
			onShareAppMessage(res) {
				let path = '/pages/hotel/jiudian';
				if (uni.getStorageSync('user_id')) {
					path = '/pages/hotel/jiudian?referee_id=' + uni.getStorageSync('user_id');
				}
				return {
					title: '季忆水雲乡',
					path: path,
					// imageUrl:'../../static/person_img.png'

				}
			},
			onShareTimeline(res) {
				let path = '/pages/hotel/jiudian';
				if (uni.getStorageSync('user_id')) {
					path = '/pages/hotel/jiudian?referee_id=' + uni.getStorageSync('user_id');
				}
				return {
					title: '季忆水雲乡',
					path: path,
					// imageUrl:'../../static/person_img.png'

				}
			},
			getlocation() {
				let _this = this
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {
						//逆地址解析  坐标转地址信息
						_this.lat = res.latitude
						_this.lng = res.longitude
						if (_this.listid == "") {
							_this.inithotelname()
						} else {
							_this.getselectshopinfo()
						}
					}
				});

			},
			gojiesuan() { //去结算
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				if (this.carlist.length == 0) {
					httpRequest.toast("请选择商品加入购物车再进行结算")
					return false
				}
				let data = {
					type: "cart", //detail=商品详情，cart=购物车
					data: [],
				}
				this.carlist.forEach(item => {
					data.data.push({
						goods_id: item.goods_id, //商品id
						number: item.number, //数量
						sku_id: item.sku_id //规格id
					})
				})
				uni.navigateTo({
					url: '/pages/shopping/querenorder?msg=' + encodeURIComponent(JSON.stringify(data))
				})
			},
			//选择酒店
			goselecthotel() {
				uni.navigateTo({
					url: '/pages/shopping/selectjiudian?id=' + this.hotelinfo.id
				})
			},
			// 获取酒店详情
			getselectshopinfo() {
				let _this = this
				httpRequest.request('api/goods/getCurrShop', 'GET', {
					shop_id: _this.listid,
					lat: _this.lat,
					lng: _this.lng
				}, false, false, true).then(res => {
					if (res.code == 1) {
						_this.hotelinfo = res.data
						_this.getcatelist()
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			//默认酒店信息
			inithotelname() {
				httpRequest.request('api/goods/shopDetail', 'GET', {
					lat: this.lat,
					lng: this.lng
				}, false, false, true).then(res => {
					if (res.code == 1) {
						this.hotelinfo = res.data
						this.getcatelist()

					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			//商品分类
			getcatelist() {
				httpRequest.request('api/goods/goodsCategory', 'GET', {
					shop_id: this.hotelinfo.id
				}, false, false, true).then(res => {
					if (res.code == 1) {
						if (res.data.length) {
							this.catelist = res.data.reverse()
							this.getgoodslist()
							if (httpRequest.checkIsLogin()) {
								this.getcar()
							}
						} else {
							this.catelist = []
							this.goodslist = {}
							this.goodslist.data = []
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			//商品列表
			getgoodslist(isPage, page, id) {
				let _this = this;
				httpRequest.request('api/goods/goodsList', 'GET', {
					page: page || 1,
					limit: _this.limit,
					category_id: id || _this.catelist[0].id,
					shop_id: _this.hotelinfo.id,
					keyword: _this.keyword
				}, false, false, true).then(res => {
					if (res.code == 1) {
						res.data.data.forEach(item => {
							this.$set(item, "status", 0)
							this.$set(item, "number", 0)
							// 1有规格未选中，2有规格已选中，3无规格未选中，4无规格已选中
							if (item.specs == "single") { //无规格未选中
								item.status = 3
							} else { //有规格未选中
								item.status = 1
							}
						})
						let resList = res.data;
						let dataList = _this.goodslist;
						if (isPage == true) {
							_this.goodslist.data = dataList.data.concat(resList.data);
						} else {
							this.goodslist = res.data
							_this.goodslist.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			//点击左侧切换
			changeitem(item, index) {
				this.activeIndex = index
				this.getgoodslist(false, 1, item.id)
			},
			jumpdetail(id, stock) {
				if (stock == 0) {
					httpRequest.toast('当前商品暂无库存')
					return
				}
				uni.navigateTo({
					url: '/pages/shopping/productdetail?id=' + id
				})
			},
			selectguige(id) {
				this.addCartShow = true
				this.addShow = true
				this.newNumber=0
				httpRequest.request('api/goods/goodsDetail', 'GET', {
					goods_id: id,
				}, false, false, true).then(res => {
					if (res.data.goodsprice == null) {
						httpRequest.toast('当前商品暂无库存')
						return
					}
					this.show = true
					if (res.code == 1) {
						this.$set(res.data, "number", 1)
						this.$set(res.data, "sku_id", "")
						res.data.spu.forEach(current => {
							current.item = current.item.split(",")
							this.$set(current, "selecttext", "")
						})
						this.dataAll = res.data
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
				// this.show = true
			},
			// 规格选择
			checkgg(item, ite) {
				item.selecttext = ite
			},
			closeguige(item) {
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				if (this.guigeflag == false) {
					httpRequest.toast("请选择规格")
					return false
				}
				// if (this.allNum >= this.dataAll.goodsprice.stock) {
				// 	httpRequest.modal('提示', '当前商品数量等于该商品库存，无法继续添加当前商品', false)
				// 	return false
				// }
				let newId = ""
				let newNumber = this.newNumberCart
				let newSpecs = ""
				let newSku_id = ""
				if (this.carlist.length) {
					this.carlist.forEach(value => {
						if (item.id == value.goods_id) {
							newId = value.goods_id
							if(item.sku_id == value.sku_id){
								console.log("购物车已有该规格商品商品规格id为", value.sku_id)
								newSku_id = value.sku_id
								newNumber = value.number
							}
							newSpecs = value.specs
						}
					})
				}
				if (newId) {
					if (newSpecs == "single") {
						if ((Number(item.number)) + newNumber == item.goodsprice.stock) {
							this.addCartShow = true
							this.addShow = false
						} else if ((Number(item.number)) + newNumber > item.goodsprice.stock) {
							this.addShow = false
							this.addCartShow = false
						}
					} else {
						
						if (newSku_id) {
							console.log(item.number, "item")
							console.log(item.number, "value")
							console.log(item.goodsprice.stock, "stock")
							console.log(this.addShow, "addShow")
							if ((Number(item.number)) + newNumber == item.goodsprice.stock) {
								this.addCartShow = true
								this.addShow = false
							} else if ((Number(item.number)) + newNumber > item.goodsprice.stock) {
								console.log(1111, "大于")
								this.addShow = false
								this.addCartShow = false
							}
						} else {
							this.addCartShow = true
							this.addShow = true
						}
					}
				}
				console.log(this.addShow, "最后addShow")
				console.log(this.addCartShow, "最后addCartShow")
				console.log(this.addCartShow)
				if (!this.addCartShow) {
					httpRequest.modal('提示', '当前商品数量等于该商品库存，无法继续添加当前商品', false)
					this.show = false
					return false
				}
				httpRequest.request('api/cart/addCart', 'GET', {
					goods_id: this.dataAll.id,
					shop_id: this.dataAll.shop_id,
					sku_id: this.dataAll.sku_id,
					number: this.dataAll.number
				}, false, false, true).then(res => {
					this.addCartShow = true
					this.addShow = true
					console.log(this.addCartShow, "获取购物车")
					console.log(this.addShow, "获取购物车")
					this.getcar()
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
				this.show = false
			},
			// 获取购物车列表数据
			getcar() {
				httpRequest.request('api/cart/cartList', 'GET', {
					shop_id: this.hotelinfo.id
				}, false, false, true).then(res => {
					this.carlist = res.data
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			opencart() {
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				} else {
					if (this.carlist.length) {
						this.cartshow = true
					}
				}
			},
			// 购物车数量减，如果数量为1还减的话删除购物车数据
			carjian(item) {
				if (item.number == 1) {
					httpRequest.modal('提示', '当前购物车数量为1，如果继续减少的话将删除当前商品，是否继续？', true, (res) => {
						if (res) {
							httpRequest.request('api/cart/delCart', 'POST', {
								goods_id: item.goods_id,
								sku_id: item.sku_id,
							}, false, false, true).then(res => {
								httpRequest.toast(res.msg)
								this.getcar()
							})
						}

					})
				} else {
					item.number--
					httpRequest.request('api/cart/clCart', 'POST', { //操作购物车数量
						goods_id: item.goods_id,
						sku_id: item.sku_id,
						number: item.number
					}, false, false, true).then(res => {})
				}
			},
			carjia(item) {
				item.number++;
				httpRequest.request('api/cart/clCart', 'POST', { //操作购物车数量
					goods_id: item.goods_id,
					sku_id: item.sku_id,
					number: item.number
				}, false, false, true).then(res => {})
			},
			jia(item, type) { // type 0 选规格弹窗 1 购物车弹窗
				// console.log(item.number, 'number')
				// console.log(this.allNum, 'allNum')
				// console.log(item,type);
				// console.log(type);
				// console.log(item.sku,item.goodsprice);
				if (type == 1) {
					// console.log(item.sku.stock);
					if (item.number == item.sku.stock) {
						httpRequest.modal('提示', '当前商品数量等于该商品库存，无法继续添加当前商品', false)
						return
					}
				} else if (type == 0) {
					if (this.guigeflag == false) {
						httpRequest.toast("请选择规格")
						return
					}
					console.log(item)
					console.log(this.carlist)
					let newId = ""
					let newNumber = this.newNumber
					let newSpecs = ""
					let newSku_id = ""
					if (this.carlist.length) {
						this.carlist.forEach(value => {
							if (item.id == value.goods_id) {
								newId = value.goods_id
								console.log(newId)
								if(item.sku_id == value.sku_id){
									console.log("购物车已有该规格商品商品规格id为", value.sku_id)
									newSku_id = value.sku_id
									newNumber = value.number
								}
								newSpecs = value.specs
							}
						})
					}
					
					if (newId) {
						console.log(newId, "有id")
						console.log(item.number, "item")
						console.log(newNumber, "newNumber")
						if (newSpecs == "single") {
							if ((Number(item.number)) + newNumber == item.goodsprice.stock) {
								console.log("等于")
								this.addCartShow = true
								this.addShow = false
							} else if ((Number(item.number)) + newNumber > item.goodsprice.stock) {
								console.log("大于")
								this.addShow = false
								this.addCartShow = false
							}
						} else {
							
							if (newSku_id) {
								console.log(item.number, "item")
								console.log(newNumber, "newNumber")
								console.log(item.goodsprice.stock, "stock")
								console.log(this.addShow, "addShow")
								if ((Number(item.number)) + newNumber == item.goodsprice.stock) {
									console.log(1111, "等于")
									this.addCartShow = true
									this.addShow = false
								} else if ((Number(item.number)) + newNumber > item.goodsprice.stock) {
									console.log(2222, "大于")
									this.addShow = false
									this.addCartShow = false
								}
							} else {
								this.addCartShow = true
								this.addShow = true
							}
						}
					}
					console.log(this.addShow, "最后addShow")
					console.log(this.addCartShow, "最后addCartShow")
					if (!this.addShow) {
						httpRequest.modal('提示', '当前商品数量等于该商品库存，无法继续添加当前商品', false)
						console.log("提示1")
						return
					}
					// console.log(item)
					// console.log(this.carlist)
					if ((Number(item.number)) >= item.goodsprice.stock) {
						httpRequest.modal('提示', '当前商品数量等于该商品库存，无法继续添加当前商品', false)
						console.log("提示2")
						return
					}
				} else {
					if (item.goodsprice.stock == 0) {
						httpRequest.toast('当前商品暂无库存')
						return
					}
				}
				item.number++;
			},
			jian(item) {
				if (item.number == 1) {
					return false
				}
				item.number--
				this.newNumber--
				this.addShow=true
				this.addCartShow=true
			},
			cartclose() {
				this.cartshow = false
			},
			// 清空购物车
			clearcart() {
				this.cartshow = false
				httpRequest.request('api/cart/cearCart', 'POST', {
					shop_id: this.hotelinfo.id,
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.addShow = true
						this.addCartShow = true
						this.getcar()
					}
				})
			},
		},
		onReachBottom() {
			let _this = this;
			let list = _this.goodslist;
			let page = _this.page;
			if (list.last_page <= page) {
				return false;
			}
			page++;
			_this.page = page;
			_this.init(true, page);
		},
	}
</script>

<style lang="less">
	.mainbgc {
		background-color: #fafafa;
		min-height: 100vh;
		// padding-top: 30rpx;
	}

	.ss {
		background-color: #f3f3f3;
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		padding: 10rpx 18rpx;
	}

	.search {
		width: 27rpx;
		height: 27rpx;
		margin-right: 30rpx;
	}

	.plist {
		margin-top: 30rpx;
		// padding-bottom: 120rpx;
	}

	.scroll-Yleft {
		height: calc(100vh - 330rpx);
		width: 190rpx;
	}

	.scroll-Yright {
		height: calc(100vh - 330rpx);
		width: calc(100vw - 190rpx);
	}

	.ht {
		background-color: #FFFFFF;
		padding: 30rpx;
		margin-top: 30rpx;
	}

	.rightmiddle {
		margin-top: 20rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		line-height: 30rpx;

		.godsguige {
			margin-right: 40rpx;
		}
	}

	.dianlogo {
		width: 23rpx;
		height: 34rpx;
		margin-right: 20rpx;
	}

	.dianming {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		line-height: 33rpx;
	}

	.item {
		padding: 30rpx;
		background-color: #FFFFFF;
	}

	.item:nth-child(1) {
		margin: 0;
	}

	.itemli-boxf {
		padding: 30rpx 10rpx;
		background-color: #fff;
		color: #00D2E1;
		position: relative;

		&::after {
			content: '';
			width: 6rpx;
			height: 30rpx;
			border-radius: 6rpx;
			background-color: #00D2E1;
			position: absolute;
			left: 8rpx;
			top: 50%;
			transform: translateY(-50%);
		}

	}

	.itemli-box {
		padding: 30rpx 10rpx;
		background-color: #F9F9F8;
		color: #666666;
	}


	.itemli-content1 {
		text-align: center;
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		line-height: 35rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}


	.flimg {
		width: 124rpx;
		height: 124rpx;
		margin-right: 30rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.productname {
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #333333;
		line-height: 35rpx;
	}

	.price {
		font-size: 36rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FF5C00;
		line-height: 23rpx;
		margin-top: 38rpx;
	}

	.jia,
	.jian {
		// width: 34rpx;
		// height: 34rpx;
		width: 45rpx;
		height: 45rpx;
		padding: 0 14rpx;
	}

	.jia {
		padding-left: 30rpx;
	}

	.jian {
		padding-right: 30rpx;
	}

	.uu {
		flex: 1;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.xuanguige {
		border-radius: 65rpx;
		background-color: rgba(12, 224, 239, 1);
		padding: 2rpx 30rpx;
		text-align: center;
		font-size: 20rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		line-height: 43rpx;
	}

	.bottomsubmitbtn {
		position: fixed;
		width: 100%;
		bottom: 0rpx;
		left: 0rpx;
		padding: 30rpx;
		background-color: #FFFFFF;
		box-sizing: border-box;
		line-height: 100%;
	}

	.cartimg {
		position: relative;

		.num {
			position: absolute;
			right: -8rpx;
			top: -10rpx;
			font-size: 18rpx;
			// padding: 6rpx 6rpx;
			width: 36rpx;
			height: 36rpx;
			background-color: red;
			color: #FFFFFF;
			border-radius: 50%;
			text-align: center;
			line-height: 36rpx;
		}
	}

	.cart {
		width: 68rpx;
		height: 68rpx
	}

	.price1 {
		font-size: 36rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FD463E;
		line-height: 42rpx;
	}

	.submitcontext {
		border-radius: 120rpx;
		background-color: #FF5C00;
		padding: 2rpx 84rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		line-height: 80rpx;
	}

	/*弹窗*/
	.guitan {
		padding: 30rpx;
	}

	.tanprice {
		font-size: 36rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FF5C00;
		line-height: 42rpx;

		.newtanprice {
			margin-right: 29rpx;
		}

		.tanoldprice {
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 28rpx;
			text-decoration: line-through;
		}
	}

	.kucun {
		margin-top: 28rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #666666;
		line-height: 30rpx;
	}

	.guige {
		margin-top: 68rpx;
	}

	.tangui {
		font-size: 26rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #333333;
		line-height: 30rpx;
	}

	.guilist {
		margin-top: 30rpx;
	}

	.guiitem {
		margin-right: 24rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		line-height: 30rpx;
		padding: 9rpx 35rpx;
		border-radius: 26rpx;
	}

	.active {
		color: #00D2E1;
		background-color: rgba(0, 210, 225, 0.1);

	}

	.noactive {
		color: #666666;
		background-color: rgba(245, 245, 245, 1);
	}

	.tannum {
		margin-top: 30rpx;
	}

	.tanbtn {
		margin-top: 60rpx;
		text-align: center;
		background-color: rgba(0, 212, 226, 1);
		text-align: center;
		padding: 20rpx 0;
		border-radius: 41rpx;
		color: #fff;
	}

	// 购物车弹窗
	.carttanlist {
		margin-top: 39rpx;
	}

	.cartlimg {
		margin-right: 16rpx;
		width: 129rpx;
		height: 129rpx;
		position: relative;

		.noStock {
			width: 129rpx;
			height: 129rpx;
			position: absolute;
			top: 0;
			left: 0;
			border-radius: 6rpx;
			background-color: #000;
			opacity: .5;
			color: #fff;
			text-align: center;
			line-height: 129rpx;
			font-size: 30rpx;
		}

		image {
			width: 129rpx;
			height: 129rpx;
		}
	}

	.cartnumbox {
		display: flex;
		// align-items: flex-end;
		align-items: center;

		.num {
			// width: 70rpx;
			// text-align: center;
			max-width: 300rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
			line-height: 33rpx;
		}
	}

	.itemlist {
		margin-top: 30rpx;
		background-color: #FFFFFF;
		display: flex;
	}

	.productimg {
		width: 124rpx;
		height: 124rpx;
		margin-right: 25rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 14rpx;
		}
	}

	.right {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.righttop {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.rightbottom {
		display: flex;
		align-items: flex-end;
		margin-top: 30rpx;
		justify-content: space-between;
	}

	.txt1 {
		width: 330rpx;
		// width: calc(100%-106rpx);
		font-size: 26rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		line-height: 30rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.txt2 {
		font-size: 34rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FF5C00;
		line-height: 40rpx;
	}

	.txt3 {
		font-size: 20rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FF5C00;
		line-height: 23rpx;
	}

	.txt4 {
		font-size: 26rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FF5C00;
		line-height: 30rpx;
	}
</style>